<!DOCTYPE HTML>
<html>
<head>
    <title>Todo</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
    <script src="/scripts/jquery.min.js"></script>
    <link rel="stylesheet" href="/scripts/miniui/themes/default/miniui.css">
    <link rel="stylesheet" href="/scripts/miniui/themes/icons.css">
    <link rel="stylesheet" href="/scripts/miniui/themes/bootstrap/skin.css">
    <link rel="stylesheet" href="/editor/common.css">
    <script src="/scripts/miniui/miniui.js"></script>
</head>
<body  style="padding: 0;width: 100%;height: 100%;margin: 0">
<div id="outImg">
    <img id="imgId" src="" alt="" onclick="smallImg()">
</div>
<div class="mini-toolbar" style="text-align: center; line-height: 30px; border: 0px;" borderstyle="border:0;">
    <span>商品名称：</span><input  class="mini-textbox" type="text" id="name"/>
    <span>商品id：</span><input  class="mini-textbox" type="text" id="objectId"/>
    <input style="margin-right: 30px" type="button" value="查找" onclick="search()"/>
</div>
<div id="datagrid1" class="mini-datagrid" style="width:100%;height: 80%"
     url="/getdata/scoreShopGoodSelectNoGroup" idField="id" allowResize="true"
     sizeList="[10,30,50,100]" pageSize="10"
>
    <div property="columns">
        <div type="checkcolumn" width="20" ></div>
        <div field="objectId" width="80" align="center" headerAlign="center">商品ID</div>
        <div field="title" width="50" align="center" headerAlign="center">商品名称</div>
        <div field="shopIcon"  width="60" align="center" headerAlign="center">商品Icon</div>
        <div field="price"  width="60" align="center" headerAlign="center">商品折扣价</div>
        <div field="createdAt" width="100" renderer="onBirthdayRenderer" align="center" headerAlign="center" allowSort="true">创建日期</div>
    </div>
</div>
<div class="mini-toolbar" style="text-align: center; padding-top: 8px; padding-bottom: 8px; border: 0px;" borderstyle="border:0;">
    <a class="mini-button" href="javascript:void(0)"  style="width: 60px;"><span class="mini-button-text " onclick="onOk()">确定</span></a>
    <span style="display:inline-block;width:25px;"></span>
    <a class="mini-button" href="javascript:void(0)"  style="width: 60px;"><span class="mini-button-text " onclick="onCancel()">取消</span></a>
</div>

</body>
<script type="text/javascript">
  var flag = 1;
  mini.parse();
  var grid = mini.get("datagrid1");

  grid.load();
  grid.on("drawcell", function (e) {
    var  value = e.value;
    var  column = e.column;
    if (column.field == "shopIcon") {
      if(value) {
        e.cellHtml = '<img class="bigImg" onclick="bigImg()" src="' + value + '?imageMogr2/thumbnail/640x/format/jpg/interlace/1/auto-orient" width="30" height="30" alt="图片">';
      }else{
        e.cellHtml = '<img class="bigImg" onclick="bigImg()"  src="http://7xiuo5.com1.z0.glb.clouddn.com/fgImage.png?imageMogr2/auto-orient/thumbnail/!100x100r/gravity/Center/crop/100x100/quality/80/auto-orient" width="30" height="30" alt="图片">';
      }
    }
  });

  function search() {
    var name = mini.get("name").getValue();
    var objectId = mini.get("objectId").getValue();
    grid.load({
      name,
      objectId,
    });
  }
  $("#name,#objectId").bind("keydown", function (e) {
    if (e.keyCode == 13) {
      search();
    }
  });

  function bigImg() {
    var row = grid.getSelected();
    if (row) {
      if(flag==1) {
        var path = row.shopIcon;
        $("#imgId").attr('src', path);
        $("#outImg").css('display','block');
      }
    }
  }
  function smallImg() {
    $("#outImg").css('display','none');
  }

  function onBirthdayRenderer(e) {
    var value = e.value;
    if (value) return mini.formatDate(value, 'yyyy-MM-dd hh:mm:ss');
    return "";
  }
  function GetData() {
    var rows = grid.getSelecteds();
    var ids = [], texts = [];
    for (var i = 0, l = rows.length; i < l; i++) {
      var row = rows[i];
      ids.push(row.objectId);
      texts.push(row.title);
    }
    var data = {};
    data.id = ids.join(",");
    data.text = texts.join(",");
    return data;
  }

  function CloseWindow(action) {
    if (window.CloseOwnerWindow) return window.CloseOwnerWindow(action);
    else window.close();
  }

  function onOk() {
    CloseWindow("ok");
  }
  function onCancel() {
    CloseWindow("cancel");
  }
</script>
</html>